

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>聊天记录</title>

  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css">
  <style>
    body .layim-chat-main{height: auto;}
  </style>
</head>
<body>

<div class="layim-chat-main">
  <ul id="LAY_view"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!--
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->



<script src="../../layuiadmin/layui/layui.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
  layui.config({
    base: '../../layuiadmin/'
  }).extend({
    index: 'lib/index' //主入口模块
    ,layim: 'layui/lay/modules/layim' //layim
    ,laypage: 'layui/lay/modules/laypage' //laypage
  }).use(['index','layim', 'laypage','setter'], function(){
    var layim = layui.layim
            ,layer = layui.layer
            ,index = layui.index
            ,laytpl = layui.laytpl
            ,setter = layui.setter
            ,$ = layui.jquery
            ,laypage = layui.laypage;

    //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html


    //开始请求聊天记录
    var param = layui.router().search;
    $.ajax({
      url: layui.setter.apiHost + '/api/order/message/pagination/'+param.orderNum
      , method: "GET"
      , data: {"pageNum": 0 ,"pageSize": 99999}
    }).done(function (res2){
      if(res2.code == '200'){
        let resData = new Array();
        $.each(res2.data.list,function (i,v) {
          let obj = {
            username: v.creatorName
            ,avatar: v.creatorHeadUrl
            ,id: v.creatorId
            ,content: v.message
            ,timestamp: v.createTimeLong
          }
          resData.push(obj)
        });
        var html = laytpl(LAY_tpl.value).render({
          data: resData
        });
        $('#LAY_view').html(html);
      }
    });
  });
</script>
</body>
</html>
